<script setup>

import {onMounted, ref} from "vue";
import {confirmMessage, showMessage} from "../../util/message.js";
import {doDelete, doGet, doPost} from "../../util/request.js";
import {useRouter} from "vue-router";

// 创建路由对象
const router = useRouter()
// 创建线索信息对象
const list = ref([])
// 创建分页对象
const pageInfo = ref({})

// 加载线索列表
const loadData = (current) => {
  doGet('/api/clue/page',{current:current})
      .then(resp => {
        if (resp.data.code === 200) {
          list.value = resp.data.data.list;
          pageInfo.value.total = resp.data.data.total;
        } else {
          showMessage('查询失败，原因：' + resp.data.message,'error')
        }
      })
}

onMounted(()=>{
  loadData(1)
})

// 跳转至编辑页面
const toEdit = (id) => {
  router.push('/dashboard/clue/edit/'+id)
}

// 创建导入弹出层控制标识
const importDialogVisible = ref(false)
const uploadRef = ref({})
// 提交导入请求
const submitExcel = () => {
  uploadRef.value.submit()
}

const uploadExcel = (options) => {
  alert(options.action)
  let formData = new FormData()
  formData.append('file',options.file)
  doPost(options.action,formData).then(resp => {
    if (resp.data.code === 200) {
      showMessage('导入成功', 'success');
      importDialogVisible.value = false;
      loadData(1);
    } else {
      showMessage('导入失败，原因：' + resp.data.message, 'error')
    }
  })
}
//单个删除线索
const toDel = (id) => {
  confirmMessage('您确认要删除吗？')
  doDelete('/api/clue/'+id,{}).then(resp => {
    if (resp.data.code === 200) {
      showMessage("删除线索成功", 'success')
      loadData(1)
    } else {
      showMessage("删除线索失败，原因："+resp.data.msg,'error')
    }
  })
}
let idArr = []
// 处理选中事件函数
const handleSelectionChange = (newSelection) => {
  idArr = []
  newSelection.forEach(item=>{
    idArr.push(item.id)
  })
  console.log(idArr)
}

// 批量删除用户
const toBatchDel = () => {
  // 判断用户是否选择了数据
  if (idArr.length <= 0) {
    showMessage('请选择要删除的数据!','warning')
    return
  }
  confirmMessage('您确定要批量删除吗？')
      .then(()=>{
        console.log("要删除的数据----- "+idArr)
        // 发送删除的请求
        doDelete('/api/clue/batch/'+idArr,{}).then(resp=>{
          if (resp.data.code === 200) {
            showMessage('删除成功！', 'success');
            // 刷新局部页面
            loadData(1)
          } else {
            showMessage('删除失败，原因：'+resp.data.msg,'error')
          }
        })
      })
}

//跳转至详情页面
const toDetail = (id) => {
  router.push('/dashboard/clue/detail/'+id)
}
</script>

<template>
  <el-button type="primary" @click="router.push('/dashboard/clue/add')" >录入线索</el-button>
  <el-button type="success" @click="importDialogVisible=true">导入线索(Excel)</el-button>
  <el-button type="danger" @click="toBatchDel">批量删除</el-button>
  <div>&nbsp;</div>

  <el-table
      :data="list"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="序号" type="index" width="80" />
    <el-table-column label="负责人" property="ownerName"  width="100"/>
    <el-table-column label="所属活动" property="activityName"  width="150"/>
    <el-table-column label="姓名" width="80" property="fullName"/>
    <el-table-column label="称呼" width="80" property="appellationName"/>
    <el-table-column label="手机" width="120" property="phone"/>
    <el-table-column label="微信" width="120" property="weixin"/>
    <el-table-column label="是否贷款" width="80" property="needLoanName"/>
    <el-table-column label="意向状态" width="80" property="intentionStateName"/>
    <el-table-column label="意向产品" width="120" property="intentionProductName"/>
    <el-table-column label="线索状态" width="80" property="stateName"/>
    <el-table-column label="线索来源" width="80" property="sourceName"/>
    <el-table-column label="下次联系时间" width="200" property="nextContactTime"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="toDetail(scope.row.id)">
          详情
        </el-button>
        <el-button type="success" size="small" @click="toEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>

  <!--  导入Excel弹出层-->
  <el-dialog
      v-model="importDialogVisible"
      title="导入线索Excel"
      width="800"
      :close-on-click-modal=false
      :show-close=false
      align-center>

    <el-upload
        ref="uploadRef"
        method="post"
        action="/api/clue/import"
        :http-request="uploadExcel"
        :auto-upload="false">
      <template #trigger>
        <el-button type="primary">选择Excel文件</el-button>
      </template>
      仅支持后缀名为.xls或.xlsx的文件
      <div class="fileTip">
        重要提示：
        <ul>
          <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
          <li>给定Excel文件的第一行将视为字段名；</li>
          <li>请确认您的文件大小不超过50MB；</li>
          <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
          <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
        </ul>
      </div>
      <div class="dialog-footer">
        <el-button @click="importDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submitExcel">导 入</el-button>
      </div>
    </el-upload>

  </el-dialog>


</template>

<style scoped>

</style>